<template>
  <el-button :size="props.size" type="danger" @click="openDelete"> 批量删除</el-button>
  <el-dialog v-model="deleteModel" title="删除" width="60%">
    这会删除所选用户是否删除？
    <template #footer>
      <el-button @click="deleteModel = false">取消</el-button>
      <el-button type="danger" @click="deleteByIds"> 删除</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import {userRoleDelete} from "@/views/system/user/js/UserRoleRequest.js";
import {ref, defineEmits} from "vue";
import {ElMessage} from "element-plus";

const props = defineProps({
  ids: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'default',
  }
})
const deleteModel = ref(false)
const emit = defineEmits(['deleteChange'])

const openDelete = () => {
  if (props.ids.length === 0) {
    ElMessage.warning("请勾选数据！")
    return
  }
  deleteModel.value = true
}

const deleteByIds = () => {
  userRoleDelete(props.ids).then(res => {
    if (res.success) {
      ElMessage.success("删除成功")
    }
  }).finally(() => {
    deleteModel.value = false
    emit('deleteChange')
  })
}

</script>
